<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>后台管理系统</title>
    <!--引入Layui样式文件-->
    <link rel="stylesheet" th:href="@{layui/css/layui.css}">
</head>
<body>
<!--引入layui经典布局并改版-->
<div class="layui-layout layui-layout-admin">
    <!--页面头部-->
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">十方智育管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="https://img0.baidu.com/it/u=1093257630,1127657298&fm=253&fmt=auto&app=138&f=JPEG?w=420&h=420"
                         class="layui-nav-img">
                    <!--静态页面获取登录用户的昵称-->
                    <span class="user-info"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">个人信息</a></dd>
                    <dd><a href="">系统设置</a></dd>
                    <dd><a href="javascript:void(0);" class="logoutBtn">退出系统</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree treeMenu" lay-filter="test">
                <!--<li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/page/sys/user}" target="mainFrame">用户列表</a></dd>
                        <dd><a th:href="@{/page/sys/role}" target="mainFrame">角色列表</a></dd>
                        <dd><a th:href="@{/page/sys/permission}" target="mainFrame">权限列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">业务管理</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/student/find}" target="mainFrame">学生列表</a></dd>
                        <dd><a th:href="@{/page/emp}" target="mainFrame">员工列表</a></dd>
                        <dd><a th:href="@{/page/dept}" target="mainFrame">部门列表</a></dd>
                    </dl>
                </li>-->
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe name="mainFrame" frameborder="0" style="width:100%;height: 100%" th:src="@{/welcome}"></iframe>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>

<!--引入layui.js文件-->
<!--引入layui.js文件-->
<script type="text/javascript" th:src="@{layui/layui.js}"></script>
<script type="text/javascript" th:src="@{js/tool.js}"></script>
<script>
    layui.use(['layer', 'element'], function () {
        var element = layui.element,
            layer = layui.layer,
            $ = layui.$;

        // 发送异步请求获取动态菜单数据
        $.ajax({
            url: 'permission/findMenu',
            type: 'get',
            success: function(res){
                console.log(res)
                if(res.code == 200){
                    var menus = dataToTree(res.data);
                    console.log('===>菜单数据：', menus);
                    var str = '';
                    menus.forEach(function(item,index){
                        if(index == 0){
                            str += '<li class="layui-nav-item layui-nav-itemed">';
                        }else{
                            str += '<li class="layui-nav-item">';
                        }
                        str += '<a class="" href="javascript:;">' + item.name + '</a>';
                        if(item.children && item.children.length > 0){
                            str += '<dl class="layui-nav-child">';
                            item.children.forEach(function(item2){
                                str += '<dd><a href="' +  item2.url + '" target="mainFrame">' + item2.name + '</a></dd>';
                            });
                            str += '</dl>';
                        }
                        str += '</li>';
                    });
                    $('.treeMenu').html(str);
                    element.render('nav', 'test');
                }else{
                    layer.msg(res.message);
                }
            }
        });


        //获取前端缓存中的数据
        var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        if (userInfo && userInfo.nickname) {
            $('.user-info').html(userInfo.nickname);
        } else {
            location.href='/login'
        }

        $('.logoutBtn').click(function () {
            layer.confirm('确定要退出系统吗?', function () {
                $.ajax('/logout', {
                    type: 'get',
                    success: function (res) {
                        sessionStorage.removeItem('userInfo');
                        location.href = '/login';
                    }
                })
            });
        });
    });
</script>
</body>
</html>